$(document).ready(function () {
    init();

    function init() {
        alert("init getClazz");
        $.ajax({
            type: "get",
            url: urlUserCenter+"/clazz/getClazz",
            dataType: "json",
            success: function (data) {
                for (var i in data) {
                    $("#inClazz").append("<option value=" + data[i].id + ">" + data[i].name + "</option>");
                }
            },
            error: function (err) {
                console.log(err);
            }
        })
    }

    $("#inClazz").change(function () {
        getUserByClazzId();
    });

    function getUserByClazzId() {
        $("#inUser").empty();//首先清空select现在有的内容
        var clazzId = $("#inClazz").val();
        $.ajax({
            type: "get",
            url: urlUserCenter+"/user/getUserByClazzId/" + clazzId,
            data: {
                id: clazzId,
            },
            dataType: "json",
            success: function (data) {
                for (var i in data) {
                    $("#inUser").append("<option value=" + data[i].id + ">" + data[i].name + "</option>");
                }
            },
            error: function (err) {
                console.log(err);
            }
        })
    }

    $("#get_shuju").click(function () {
        var userId = $("#inUser").val();
        var user={
            userId:userId
        }
        $.ajax({
            type:"get",
            url:"/ability/getAbilityByUserId",
            data:user,
            dataType:"json",
            success:function (data) {
                initDraw(350.0,400.0,data);
            }
        })
    })
    
})

function initDraw(x,y,json) {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var ang=Math.PI/10;
    var r1=json.laziness;
    var r2=json.performAbility;
    var r3=json.studyAbility;
    var r4=json.talkAbility;
    var r5=json.credibility;
    context.beginPath();
    context.moveTo(x,y-r1*2);
    context.lineTo(x-Math.cos(ang)*r2*2,y-Math.sin(ang)*r2*2);
    context.lineTo(x-Math.cos(ang*3)*r3*2,y+Math.sin(ang*3)*r3*2);
    context.lineTo(x+Math.cos(ang*3)*r4*2,y+Math.sin(ang*3)*r4*2);
    context.lineTo(x+Math.cos(ang)*r5*2,y-Math.sin(ang)*r5*2);
    context.lineTo(x,y-r1*2);
    context.closePath();
    context.fillStyle="rgb(255,200,70)";
    context.fill();
    context.font = "20px cursive";
    context.fillStyle = "blue";
    context.fillText(100-r1+"%", x-8, y-r1*2-8);
    context.fillText(r2+"%", x-Math.cos(ang)*r2*2-30,y-Math.sin(ang)*r2*2+8);
    context.fillText(r3+"%", x-Math.cos(ang*3)*r3*2-15,y+Math.sin(ang*3)*r3*2+20);
    context.fillText(r4+"%", x+Math.cos(ang*3)*r4*2-15,y+Math.sin(ang*3)*r4*2+20);
    context.fillText(r5+"%", x+Math.cos(ang)*r5*2,y-Math.sin(ang)*r5*2+8);

}